<template>
  <h3>Vue过渡模式 演示</h3>

  <div class="transit-body transit-app">
    <h3 class="h3">Hover us.</h3>
    <main>
      <TransitChild>
        <img src='~/assets/plane_1.jpg' alt='image of a woman on a train'>
      </TransitChild>
      <TransitChild>
        <img src='~/assets/plane_2.jpg' alt='drawing of a woman sharing soda with a zombie'>
      </TransitChild>
    </main>
  </div>

  <br>
  <p>
    说明:<br>
    Vue 提供了一个非常有用的工具，称之为过渡模式：<br>
    1. in-out: 新元素先进行进入过渡，完成之后当前元素过渡离开。<br>
    2. out-in: 当前元素先进行离开过渡，完成之后新元素过渡进入。<br>
    <b>TIP</b>: 你很快就会发现 out-in 是你大多数时候想要的状态 😃<br>
    &nbsp;&nbsp;&nbsp;&nbsp;可以用它来协调更具表现力的动作，例如折叠卡片，如本例所示。这实际上是两个元素在彼此之间转换，但是由于开始状态和结束状态的比例是相同的：水平方向上为 0，它看起来就运动得非常连贯。这种技巧对于实现拟真的 UI 交互细节非常有用.<br>
    <br>
    官方文档: <a href="https://v3.cn.vuejs.org/guide/transitions-enterleave.html#%E8%BF%87%E6%B8%A1%E6%A8%A1%E5%BC%8F"><b>过渡模式</b></a>
  </p>
</template>

<script>
import TransitChild from './TransitionChild'

export default {
  components: {
    TransitChild
  },
  setup() {
    
  },
}
</script>

<style scoped>

.transit-body {
  font-family: "Bitter", serif;
  background: #333;
  color: white;
}

.transit-app {
  text-align: center;
  /* margin: 60px; */
  margin: 0 auto;
  display: table;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.h3 {
  margin: 0 0 15px;
}

</style>